<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=no" /><!--cau hinh view report-->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- thiet lap chay ung dung full man hinh cua thiet bi apple: iphone, ipad-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>Arena | Casual Game Team</title>
<link rel="stylesheet" href="reset.css" />
<style type="text/css">
body
{
   font-family: Segoe UI Light, Arial, Helvetica;
   background-color: #000;
   background-image: url(images/arena5_bg2.jpg);
   background-repeat: no-repeat;
   margin: 0;
}
a, a:visited, a:active, a:hover { color: #fff }

.wrapper
{
   margin-top: 16px;
   text-align: center;
   white-space: nowrap;
}



      </style>
      <script language="javascript" type="text/javascript">
	  
	  // an thanh dia chi trinh duyet Safari của Mobile
	  if(!window.navigator.standalone){
		  document.addEventListener("DOMContentLoaded",adjustHeight,true);
		  window.addEventListener("orientationchange", adjustHeight, true);
	  }else{
		  document.addEventListener("click",clickHandler,true);
	  }
	  
	  function adjustHeight(){
		  var html = document.documentElement;
		  var size = window.innerHeight;
		  
		  html.style.height = (size + size) + "px";
		  window.setTimeout(function(){
			  if(window.pageYOffset == 0){
			  	window.scrollTo(0,0);
			  }
			  html.style.height = window.innerHeight + "px";
		  },0);
	  }
	  
	  // xu ly cac thay doi dinh huong man hinh
	  // Handling Screen Orientation Changes
	  switch (window.orientation) {  
	    /* Normal orientation, home button on the bottom */  
		case 0:  
			document.body.className = "portrait";  
			break;  
	 
		/* Rotated 90 degrees to the left */  
		case 90:  
			document.body.className = "landscape";  
			break;  
	 
		/* Upside down */  
		case 180:  
			document.body.className = "portrait";  
			break;  
	 
		/* Rotated 90 degrees to the right */  
		case -90:  
			document.body.className = "portrait";  
			break;  
		}
		
		function clickHandler(e) { 
    var element = e.target; 
 
    /* handle clicks only on anchor elements */ 
    if (element.localName.toUpperCase() != 'A') { 
        return; 
    } 
 
    /* ignore elements with a target value specified since "target" 
       cannot be handled in full-screen mode 
       those links shall open regularly in Mobile Safari */ 
    if (!!element.getAttribute('target')) { 
        return; 
    } 
    var url = element.href; 
 
    /* ignore links other than HTTP(S) and to different origin */ 
    var match = url.match(/^https?:\/\/(.+?)\/.*$/); 
    if (!match || match[1] != window.location.host) { 
         return; 
    } 
 
    /* finally open the link in full-screen view and prevent default behavior */ 
    window.location.href = url; 
    e.preventDefault(); } 
	  
      </script>
      <script language="javascript" type="text/javascript">
	  
	  function checkLogin(){
		  var username = document.getElementById("username").value;
		  var password = document.getElementById("password").value;
		  if(username == "" || username ==''){
			  alert('Tài khoản trống. Vui lòng nhập tài khoản');
			  document.getElementById("room_list").style.display = 'none';
		  }
		  if(password == ""){
			  alert('Mật khẩu trống. Vui lòng nhập mật khẩu');
		  }
		  if(username == "admin" && password == "admin"){
			  //alert('Đăng nhập thành công!');
			  document.getElementById("games").style.display = 'block';
			  document.getElementById("login_form").style.display = 'none';
			  document.getElementById("room_list").style.display = 'none';
		  }
		  else{
			  alert('Tài khoản hoặc mật khẩu sai. Vui lòng thử lại');
			  document.getElementById("room_list").style.display = 'none';
		  }
	  }
	  
	  function showGame(){
		  document.getElementById('games').style.display = 'none';
		  document.getElementById('room-dtail').style.display = 'none';
		  document.getElementById('cnroom').style.display ='none';
		  document.getElementById("login_form").style.display = 'none';
		  document.getElementById("room_list").style.display = 'block';
	  }
	  
	  function showRoom(){
		  document.getElementById('room-dtail').style.display = 'block';
		  document.getElementById("login_form").style.display = 'none';
		  document.getElementById("room_list").style.display = 'none';
	  }
	  
	  function creatroom(){
		  	  document.getElementById('room-dtail').style.display = 'none';
			  document.getElementById('cnroom').style.display ='block';
			  document.getElementById("login_form").style.display = 'none';
			  document.getElementById("room_list").style.display = 'none';
	  }
	  
	  function addnewRoom(){
		  var room_name = document.getElementById("roomname").value;
		  var player_number = document.getElementById("playernumber").value;
		  if(room_name == ""){
			  alert("Nhập tên phòng chơi");  
		  }else if(player_number == "choice"){
			  alert("Chọn số lượng người chơi");
		  }else{
			  alert("Tạo phòng chơi thành công");
			  document.getElementById('room-dtail').style.display = 'block';
			  document.getElementById('cnroom').style.display ='none';
			  document.getElementById("login_form").style.display = 'none';
			  document.getElementById("room_list").style.display = 'none';
		  }
	  }
      </script>
</head>

<body>
	<div class="wrapper">
		<div id="wap-game" class="wap-border">
        	<div class="login-block" id="login_form">
                <header>
                    <h1 class="upper-case">arena game | đăng nhập</h1>
                </header>
                <form action="arena_form.html" method="get">
                <article>
                    <section>
                        <p>
                            <label>Tài khoản</label>
                            <input type="text" id="username" placeholder="Nhập tên tài khoản" autofocus />
                        </p>
                        <p>
                            <label>Mật khẩu</label>
                            <input type="password" id="password" autofocus />
                        </p>
                        <div style="text-align:center;margin:10px 0 20px 0;">
                        	<!--<input type="submit" class="submit" value="Đăng nhập" onclick="checkLogin();" />-->
                            <a class="btnlogin" href="#" onclick="checkLogin();">Đăng nhập</a>
                            <div class="clear-fix"></div>
                        </div>
                        <p><span>Bạn chưa tạo tài khoản? Hãy <a href="#">Đăng ký</a> với chúng tôi</span>
                        </p>
                    </section>
                </article>
                </form>
            </div>
            <!-- form room list -->
            <div class="room-list-block" id="room_list">
            	<div style="margin-bottom:15px;">
	            	<a href="#" class="add-btn left-fix" onclick="creatroom();">Tạo phòng</a>
    	            <div class="clear-fix"></div>
                </div>
            	<div class="room-header">
                	<div class="roomid left-fix">ID</div>
                    <div class="room_name left-fix">Tên phòng</div>
                    <div class="room_player left-fix">Số người chơi</div>
                    <div class="room_state left-fix">Trạng thái</div>
                </div>
                <div class="room-row">
                    <div class="roomid left-fix">01</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 1</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">02</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 2</a></div>
                    <div class="room_player left-fix">03</div>
                    <div class="room_state left-fix"><span class="ready">Ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">03</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 3</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">04</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 4</a></div>
                    <div class="room_player left-fix">04</div>
                    <div class="room_state left-fix"><span class="ready">ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">01</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 1</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">02</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 2</a></div>
                    <div class="room_player left-fix">03</div>
                    <div class="room_state left-fix"><span class="ready">Ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">03</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 3</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">04</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 4</a></div>
                    <div class="room_player left-fix">04</div>
                    <div class="room_state left-fix"><span class="ready">ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
            	<div class="clear-fix"></div>
            </div>
            <!-- add new room -->
            <div id="cnroom">
            	<div class="adnew-room">
                	<header>
                    	<h1 class="upper-case">arena game | tạo phòng</h1>
                    </header>
                    <form action="" method="post">
                    	<article>
                        	<section>
                            	<p>
                                	<label>Tên phòng:</label>
                                    <input id="roomname" type="text" placeholder='Nhập tên phòng' autofocus />
                                </p>
                                <p>
                                	<label>Người chơi</label>
                                    <select id="playernumber">
                                    	<option value="choice" selected="selected">Số lượng người chơi</option>
                                    	<option value="2">2</option>
                                        <option value="2">3</option>
                                        <option value="2">4</option>
                                        <option value="2">5</option>
                                        <option value="2">6</option>
                                        <option value="2">7</option>
                                        <option value="2">8</option>
                                    </select>
                                </p>
                                <div style="text-align:center;margin:10px 0 20px 0;">
		                            <a class="btnlogin" href="#" onclick="addnewRoom();">Tạo phòng</a>
        	                    <div class="clear-fix"></div>
                        </div>
                            </section>
                        </article>
                    </form>
                	<div class="clear-fix"></div>
                </div>
                <div class="clear-fix"></div>
            </div>
            <!-- game list -->
            <div id="games">
            	<div class="gamelist">
                	<ul>																		
						<li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                        <li class="game_card arena"><a href="#" onclick="showGame();"><span class="textHidden">Arena game</span></a></li>
                     </ul>
                	<div class="clear-fix"></div>
                </div>
                <div class="clear-fix"></div>
            </div>
            <!-- room detail -->
            <div id="room-dtail">
            	<div class="room-dt">
                	<header>
                    	<h1>Phòng chơi 1</h1>
                    </header>
                	<div class="player">
                    	<img class="left-fix" src="player_icon.jpg" />
                        <header>
                        	<h2>Player name</h2>
                            level:<span class="level">04</span><br />
                            <input type="submit" class="readybtn right-fix" value="play" />
                        </header>
                    	<div class="clear-fix"></div>
                    </div>
                    <div class="room_player">
                    	<div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                    	<div class="clear-fix"></div>
                    </div>
                	<div class="clear-fix"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
